<nav-bar-panel></nav-bar-panel>
<div class="content container">
    <ul class="nav nav-pills">
        <li role="presentation" class="m-nav-item" style="width: 50px;">
            <a href="#/shop/{{product.shopId}}">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
        </li>
        <li class="m-nav-item" role="presentation" style="text-align: center;width: calc(100% - 90px)">
            <a href="javascript: void(0)">{{product.name}}商品详情</a>
        </li>
    </ul>

    <ul class="list-group">
        <li class="list-group-item">
            <img src="{{product.logoUrl}}" alt="" style="width: 80px; height: 80px;display: inline-block;"
                 class="thumbnail"/>
            <h4 class="limit-line inline-name"
                style="display: inline-block; position: absolute; top: 10px;left: 110px;">{{product.name}}</h4>
            <rating ng-model="product.rating" max="5" readonly="true" class="inline-rating"
                    style="display: inline-block; position: absolute; left: 110px; top: 46px; color: #ff2a2a;"></rating>
                <span class="limit-line inline-description"
                      style="display: inline-block;  position: absolute; left: 110px;top: 70px; color: #666;"
                      ng-bind="product.description | plain | to_trusted"></span>
                <span class="limit-line"
                      style="display: inline-block; position:absolute; left: 110px; top: 92px; color: #777777">{{product.commentCount}}条评价</span>
        </li>
        <li class="list-group-item">
            <span class="product-price"
                  ng-class="{'disabled': product.discount>0}">{{product.price}}元</span>
            <span class="product-price"
                  ng-if="product.discount>0" style="color: red">{{product.promotionPrice}}元</span>
        </li>
        <li class="list-group-item">
            <span class="glyphicon glyphicon-globe" style="font-size: 18px;">{{shop.address}}</span>
        </li>
        <li class="list-group-item">
            <span class="glyphicon glyphicon-phone-alt" style="font-size: 18px;">{{shop.contact}}</span>
        </li>
    </ul>
    <div style="text-align: center; background: #ddd;">
        <div class="alert alert-default" role="alert" style="background: white">
            <a ng-if="isCollected" ng-click="unCollect()" style="padding: 0 10px;">
                <span class="glyphicon glyphicon-star">取消收藏</span>
            </a>
            <a ng-if="!isCollected" ng-click="collect()" style="padding: 0 10px;">
                <span class="glyphicon glyphicon-star-empty">收藏</span>
            </a>
            <a ng-click="showingProductComments=true" style="padding: 0 10px;">
                <span class="glyphicon glyphicon-edit">点评</span>
            </a>
        </div>
    </div>
    <div>
        <h2>评论</h2>

        <div>
            <div class="panel panel-info" ng-show="showingProductComments">
                <div class="panel-heading">
                    <h3 class="panel-title">发表评论</h3>
                </div>
                <div class="panel-body">
                    <input type="text" class="form-control" ng-model="newCommentTitle" placeholder="评论标题"/>
                    <br/>
                    <textarea rows="5" ng-model="newCommentContent" style="width: 100%"></textarea>
                    <br/>
                    <button class="btn btn-danger"
                            ng-click="addProductComment(newCommentTitle, newCommentContent);newCommentTitle=''; newCommentContent=''">
                        发布
                    </button>
                </div>
            </div>
        </div>
        <div class="bs-callout bs-callout-danger comment-item-panel"
             ng-repeat="comment in comments">
            <span class="comment-author-field">{{comment.user.displayName}}:</span>
            <span>{{comment.title}}</span>
            <rating ng-model="comment.rating" max="5" readonly="true" class="inline-rating"
                    style="display: block; color: #ff2a2a"></rating>
                <span class="comment-date-field" style="top: 33px;">
                    {{comment.createTime | date: 'yyyy-MM-dd H:mm'}}</span>
            {{comment.createTime | date: 'yyyy-MM-dd H:mm'}}</span>

            <p class="well well-sm" ng-if="comment.content.length<24 || comment.contentOpened">
                {{comment.content}}
                <a ng-click="comment.contentOpened=false" ng-if="comment.content.length>24">收回</a>
            </p>

            <p class="well well-sm" ng-if="comment.content.length>=24 && !comment.contentOpened">
                {{comment.content.substr(0,24)}}...&nbsp;&nbsp;
                <a ng-click="comment.contentOpened=true">查看更多</a>
            </p>
        </div>
    </div>
    <div class="top-bottom-ctrl-panel">
        <span class="glyphicon glyphicon-menu-up ctrl-up" ng-click="goToTop()"></span>
        <span class="glyphicon glyphicon-menu-down ctrl-down" ng-click="goToBottom()"></span>
    </div>
</div>
<footer-bar-panel></footer-bar-panel>